<template>
  <div class="index">
    <!-- 头部标题 -->
    <van-nav-bar fixed title="首页" />
    <!-- 频道区域 -->
    <van-tabs v-model="active">
      <van-tab v-for="(item, index) in channelsList" :key="index" :title="item.name">
        <!-- 文章区域结构 -->
        <!-- v-model: 组件是否刷新完成 true:刷新完成 false：刷新未完成 -->
        <!-- refresh: 下拉刷新时执行的事件 -->
        <van-pull-refresh v-model="item.isLoading" @refresh="onRefresh">
          <!-- load：上拉触底时执行的函数 -->
          <!-- v-model: list 组件的加载状态 true：正在加载其它数据 false：数据加载完毕 -->
          <!-- finished：完结状态 true：说明所有的数据源加载完毕 false：还未加载完毕 -->
          <van-list v-model="item.loading" :finished="item.finished" finished-text="没有更多了" @load="onLoad">
            {{ active }}
            <van-cell v-for="(subitem, subindex) in item.articleList" :key="subindex" :title="subitem.title" />
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
    <!-- 频道操作按钮 -->
    <div class="channelBtn">
      <van-icon name="wap-nav" />
    </div>
  </div>
</template>

<script>
// 导入得到频道的方法
import { apiGetChannels } from '../../api/channle.js'
// 导入操作 localstorage 的方法
import { localGet } from '../../utils/mylocal.js'
// 导入操作文章的方法
import { apiGetArticleList } from '../../api/article'

export default {
  data () {
    return {
      // 保存频道数据
      channelsList: [],
      // 当前选中的 tab 的下标
      active: 0
    }
  },
  methods: {
    // list 组件上拉触底时执行
    async onLoad () {
      // 得到当前频道
      var currenChannel = this.channelsList[this.active]
      // 1.0 得到当前频道的 id
      var id = currenChannel.id
      // 2.0 根据频道 id 得到当前频道下的数据源
      var res = await apiGetArticleList({
        channelid: id,
        timestamp: Date.now() // 当前时间戳
      })
      // 将返回的数据源保存起来
      currenChannel.articleList = res.data.data.results
      // 将当前 list 的加载状态设置为 false
      currenChannel.loading = false
      window.console.log(this.channelsList)
    },
    // 下拉刷新时触发的事件
    onRefresh () {
    },
    // 得到频道数据
    async getChannels () {
      // 判断用户是否登录：判断
      var token = this.$store.state.userInfo.token
      try {
        if (token) {
          // 说明已经登录
          // 请求服务器接口
          var res = await apiGetChannels()
          // 保存频道数据
          this.channelsList = res.data.data.channels
        } else {
          // 说明未登录：判断 localstorage 中是否存在频道数据
          // 得到 localstorage 中的频道数据
          var localChannel = localGet('channels')
          if (localChannel) {
            // 说明 localstorage 中存在频道数据
            this.channelsList = localChannel
          } else {
            // 说明 localstorage 中不存在频道数据
            // 请求服务器接口
            var resNoLogin = await apiGetChannels()
            // 保存频道数据
            this.channelsList = resNoLogin.data.data.channels
          }
        }
      } catch {
        this.$toast('请求有误')
      }
      // 给频道数据源中再添加一个属性 articleList
      this.addOtherProps()
    },
    // 给频道数据源中添加其它的属性
    addOtherProps () {
      this.channelsList.forEach(item => {
        // 给频道数据源中的每个成员添加一个新的属性 articleList 属性
        var strName = '我是' + item.name + '中的 articleList'
        item.articleList = [strName]
        // 还需要动态添加上拉属性，下拉属性，数据加载完毕属性
        item.isLoading = false // 下拉刷新组件的刷新状态
        item.loading = false // list 组件中的加载状态
        item.finished = false // list 组件的数据源加载完毕的状态
      })
      // window.console.log(this.channelsList)
    }
  },
  // 打开页面时，应该在这里得到频道数据
  mounted () {
    this.getChannels()
  }
}
</script>

<style lang="less">
.van-nav-bar.van-hairline--bottom {
  background-color: #3e9df8;
  .van-nav-bar__title {
    color: #fff;
  }
}

.index {
  margin-top: 90px;
  margin-bottom: 50px;
  .van-tabs__wrap.van-tabs__wrap--scrollable.van-hairline--top-bottom {
    position: fixed;
    top: 46px;
    width: 90%;
    z-index: 999;
  }
  .channelBtn {
    position: fixed;
    top: 46px;
    right: 0px;
    height: 44px;
    width: 10%;
    text-align: center;
    line-height: 44px;
    background-color: #ccc;
    color: #fff;
  }
}
</style>
